<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3221000_rlj3kw12sf.css">
  <link rel="stylesheet" href="./xzui.css">
</head>

<body>
  <h1>导航组件</h1>
  <br>
  <hr>
  <br>
  <div id="root">
    <nav-bar left-arrow :title="title1" @click-left="leftFn" @click-right="rightFn"></nav-bar>
    <br>
    <hr>
    <br>
    <h1>登录组件</h1>
    <br>
    <xiaozhi @upfromdata="upFromDataFn"></xiaozhi>
    <br>
    <hr>
    <h1>按钮组件</h1>
    <br>
    <xz-button type="primary" content="主要按钮"></xz-button>
    <xz-button type="success" content="成功按钮"></xz-button>
    <xz-button type="info" content="信息按钮"></xz-button>
    <xz-button type="warning" content="警告按钮"></xz-button>
    <xz-button type="danger" content="危险按钮"></xz-button>
    <br>
    <hr>
    <h1>loading1组件</h1>
    <br>
    <loading1 :state="loading1State"></loading1>
    <button @click="loading1State = true">开启loading1</button>
    <button @click="loading1State = false">隐藏loading1</button>
    <br>
    <h1>loading2组件</h1>
    <br>
    <loading2 :state.sync="loading2State"></loading2>
    <button @click="loading2State = true">开启loading2</button>
    <br>
    <hr>
    <br>
    <xz-dialog :visible.sync="dialogState" title=""></xz-dialog>
    <br>
    <hr>
    <h1>dialog组件</h1>
    <br>
    <button @click="dialogState = true">显示对话框</button>
    <br>
    <hr>
    <h1>分页组件</h1>
    <br>
    <xz-page :total="11" :page-size="2" @click-page="changePageFn"></xz-page>

    <br>
    <hr>
    <h1>表格组件</h1>
    <br>
    <xz-table :columns="usersColumns" :data="usersData"></xz-table>
    <br>
    <xz-table :columns="goodsColumns" :data="goodsData"></xz-table>
    <br>

    <h1>element-ui表格组件</h1>
    <qf-table :data="tableData">
      <qf-table-column prop="id" label="编号1"></qf-table-column>
      <qf-table-column prop="id" label="编号2"></qf-table-column>
      <qf-table-column prop="name" label="姓名"></qf-table-column>
      <qf-table-column prop="age" label="年龄"></qf-table-column>
      <qf-table-column label="性别">
        <template slot-scope="item"> {{ item.sex == 1 ? '女' : '男' }} </template>
      </qf-table-column>
    </qf-table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./xzui.js"></script>
  <script>

    const vm = new Vue({
      el: "#root",
      data: {
        dialogState: false,
        loading1State: false,
        loading2State: false,
        content1: '创建',
        title1: '用户创建',
        usersColumns: [
          { title: "编号", key: "id" },
          { title: "姓名", key: "uname" },
          {
            title: "性别",
            key: "sex",
            render: (row) =>
              `${row.sex === 1 ? '男' : '女'}`
          }
        ],
        usersData: [
          { id: 1, uname: "小王", sex: 1 },
          { id: 2, uname: '小红', sex: 0 },
          { id: 3, uname: '小绿', sex: 0 }
        ],
        goodsColumns: [
          { title: "编号", key: "id" },
          { title: "商品名称", key: "title" },
          {
            title: '价格', key: 'price',
            render: (row) => `￥${row.price}`
          }
        ],
        goodsData: [
          { id: 1, title: '薯条', price: 7.88 },
          { id: 2, title: '快乐水', price: 3.88 },
          { id: 3, title: '沙拉', price: 12.99 }
        ],
        tableData: [
          { id: 1, name: "张三", age: 3, sex: 0 },
          { id: 2, name: "赵四", age: 18, sex: 1 },
          { id: 3, name: "王五", age: 32, sex: 0 },
          { id: 4, name: "王二", age: 19, sex: 1 },
        ],
      },
      methods: {
        changePageFn(pageNum) {
          console.log('你点击分页了:' + pageNum);
        },
        leftFn() {
          location.href = "https://cn.vuejs.org/"
        },
        rightFn() {
          location.href = "https://react.docschina.org/"
        },
        upFromDataFn(fromData) {
          console.log(fromData.account, fromData.password);
          alert('获取到数据了')
        }
      }
    })
  </script>
</body>

</html>